<template>
  <div class="detail-box">
    <div class="left">
      <div class="picture" v-viewer="{ inline: true }">
        <div class="img-box" v-for="(item, index) in posterList" :key="index">
          <img class="img" :src="item" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">会员信息</div>
      <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="form" status-icon>
        <el-form-item label="所属区域:">
          <query-dict :dict-list="areaList" show-type="radio" :value.sync="areaType"></query-dict>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input v-model.trim="formModel.phone" class="form-item" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名:" :prop="formModel.checkStatus === 1 ? 'name' : ''">
          <el-input v-model.trim="formModel.name" class="form-item" placeholder="请输入姓名" clearable></el-input>
          <span class="user-status" v-show="checkIdStatus">实名认证通过</span>
        </el-form-item>
        <el-form-item label="身份证号码:" :prop="formModel.checkStatus === 1 ? 'idcard' : ''">
          <div class="cell-flex">
            <el-input v-model.trim="formModel.idcard" class="form-item" placeholder="请输入身份证号码" clearable></el-input>
            <i class="el-icon-user-solid" v-show="!checkIdStatus && areaType === 0" @click="checkUser" title="用户认证"></i>
          </div>
        </el-form-item>
        <el-form-item label="驾驶证号码:" :prop="formModel.checkStatus === 1 ? 'driverNumber' : ''">
          <el-input v-model.trim="formModel.driverNumber" class="form-item" placeholder="请输入驾驶证号码" clearable></el-input>
        </el-form-item>
        <el-form-item label="初次领证日期:" :prop="formModel.checkStatus === 1 ? 'dateOfInitialLicensing' : ''">
          <el-date-picker v-model="formModel.dateOfInitialLicensing" type="date" placeholder="选择初次领证日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="驾驶证有效期:" :prop="formModel.checkStatus === 1 ? 'driverNumberValidityTime' : ''">
          <el-date-picker v-model="formModel.driverNumberValidityTime" type="date" placeholder="选择驾驶证有效期"></el-date-picker>
        </el-form-item>
        <el-form-item label="审核结果:" prop="checkStatus">
          <query-dict :dict-list="auditResult" showType="radio" :value.sync="formModel.checkStatus"></query-dict>
        </el-form-item>
        <el-form-item label="原因:" prop="description" v-show="formModel.checkStatus !== 1">
          <query-dict :dict-list="auditErrDescription" placeholder="请选择不通过原因" :value.sync="formModel.description"></query-dict>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
        <!-- <el-checkbox class="check-box" v-model="nextStatus" label="完成后继续下一条"></el-checkbox> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import MixinForm from 'mixins/form'
import utils from 'utils'
import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm],
  props: {
    id: {
      type: String
    }
  },
  data() {
    return {
      formModel: {
        checkStatus: 1, // 为1时审核通过，0审核不通过
        dateOfInitialLicensing: '',
        driverNumberValidityTime: ''
      },
      posterList: [], // 身份证和驾驶证
      isLoading: false,
      checkIdStatus: false, // 实名认证状态
      rules: {
        name: [{ required: true, message: '姓名不能为空 ', trigger: 'blur' }],
        idcard: [{ required: true, validator: utils.validater.idCard, trigger: 'blur' }],
        driverNumber: [{ required: true, message: '驾驶证号码不能为空', trigger: 'blur' }],
        dateOfInitialLicensing: [{ required: true, message: '初次领证日期不能为空', trigger: 'change' }],
        driverNumberValidityTime: [{ required: true, message: '驾驶证有效期不能为空', trigger: 'change' }]
      },
      genderSelect: dictObj.genderSelect,
      auditResult: dictObj.auditResult,
      auditErrDescription: dictObj.auditErrDescription,
      areaList: dictObj.areaList,
      nextStatus: true,
      areaType: 0,
      pageInfo: {
        pageNo: 1,
        pageSize: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    checkUser() {
      const { idcard, name } = this.formModel
      if (!idcard || !name) {
        return this.$msgTip('姓名或身份证号码不能为空', 'warning')
      }
      this.$api.member
        .fetch('memberExamine', {
          idcard,
          name
        })
        .then(() => {
          this.checkIdStatus = true
        })
    },
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { id } = this.$route.params
      this.isLoading = true
      this.$api.member
        .fetch('memberExamineDList', {
          id,
          rows: pageNo,
          offset: pageSize,
          status: 0
        })
        .then(res => {
          this.isLoading = false
          const { data, totalCount } = res
          if (data && totalCount) {
            const curAuditInfo = data[0]
            if (curAuditInfo) {
              const {
                cityCode,
                name,
                phone,
                idcard,
                idcardUrl,
                handCardUrl,
                driverNumberurl,
                driverCardCopyUrl,
                driverNumber,
                dateOfInitialLicensing,
                driverNumberValidityTime,
                description
              } = curAuditInfo
              this.posterList = [idcardUrl, handCardUrl, driverNumberurl, driverCardCopyUrl]
              this.formModel = {
                cityCode,
                name,
                phone,
                idcard,
                driverNumber,
                dateOfInitialLicensing: dateOfInitialLicensing ? utils.fomartDate(dateOfInitialLicensing, '{y}-{m}-{d}') : '',
                driverNumberValidityTime: driverNumberValidityTime ? utils.fomartDate(driverNumberValidityTime, '{y}-{m}-{d}') : '',
                description,
                ...this.formModel
              }
            }
          }
        })
    },
    onSubmit() {
      const { id } = this.$route.params
      const { dateOfInitialLicensing, driverNumberValidityTime, idcard, ...other } = this.formModel
      if (this.formModel.checkStatus === 1) {
        if (!this.checkIdStatus && this.areaType === 0) {
          return this.$msgTip('请先点击身份证右边头像进行实名认证，未认证通过不能进行审核', 'warning', 2000)
        }
        this.$refs.formRef.validate(valid => {
          if (valid) {
            this.$api.member
              .fetch('memberExamineAudit', {
                id,
                idcard,
                sex: idcard ? (idcard.slice(-2, -1) % 2 === 0 ? 2 : 1) : '',
                dateOfInitialLicensing: utils.fomartDate(dateOfInitialLicensing, '{y}-{m}-{d} {h}:{i}:{s}'),
                driverNumberValidityTime: utils.fomartDate(driverNumberValidityTime, '{y}-{m}-{d} {h}:{i}:{s}'),
                ...other
              })
              .then(() => {
                this.$msgTip('审核完成').then(() => {
                  this.goBack()
                })
              })
          }
        })
      } else {
        this.$refs.formRef.clearValidate()
        if (!other.description) {
          return this.$msgTip('请先选择审核不通过原因', 'warning', 2000)
        }
        this.$api.member
          .fetch('memberExamineAudit', {
            id,
            phone: other.phone,
            checkStatus: other.checkStatus,
            description: other.description
          })
          .then(() => {
            this.$msgTip('审核完成').then(() => {
              this.goBack()
            })
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-box {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;

  .left {
    display: flex;
    flex: 4;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 104px);
    padding: 0 10px;
    margin-right: 10px;
    overflow: auto;
    background-color: @white;

    i {
      width: 40px;
      font-size: @f32;
      text-align: center;
    }
    .c-image {
      width: 90%;
      height: auto;
    }
    .picture {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .img-box {
        display: flex;
        align-items: center;
        width: 300px;
        height: 300px;
        padding: 5px 5px;
        margin: 0 25px 20px 25px;
        background-color: @border-default;
        border-radius: 10px;
      }
      .img {
        width: 100%;
        max-height: 280px;
        border-radius: 10px;
      }
    }
  }
  .right {
    flex: 2;
    min-height: calc(100vh - 104px);
    padding: 20px 20px;
    background-color: @white;
    .title {
      font-size: @f20;
      font-weight: bold;
      color: @label-color;
    }
    .form {
      .cell-flex {
        display: flex;
        align-items: center;
        i {
          width: 40px;
          height: 40px;
          margin-left: 10px;
          font-size: @f24;
          line-height: 38px;
          color: @primary-color;
          text-align: center;
          border: 1px solid @primary-color;
          border-radius: 6px;
        }
      }
      .user-status {
        line-height: 0;
        color: @success;
      }
      .form-item {
        width: 100%;
      }
      .form-select {
        width: 50%;
      }
      .check-box {
        margin: 0 0 20px 120px;
      }
    }
  }
}
</style>
